/*  header-comment
/*  file   : /Users/allan/Desktop/workSpace/react-hrm-h5/src/modules/qrCode/index
/*  author : Allan
/*  date   : 2017-6-4 18:25:27
/*  last   : 2017-10-6 15:49:8
*/
import React, { Component } from "react";
// import PropTypes from "prop-types";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { mid2Url } from "@ali/ding-mediaid";
import { fetchQrCodeInfo } from "../../actions/qrCode/";
import "./index.less";
import { setRight, setTitle, openLink } from "../../utils/dingtalk.js";

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {
      dispatch,
      fetchQrCodeInfo
    },
    dispatch
  )
});

@connect(mapStateToProps, mapDispatchToProps)
export default class QrCode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      qrCodeInfo: ""
    };

    setRight({
      text: "入职指南",
      onClick: () => {
        // window.location.hash = "#/preJobList";
        const url  = "https://tms.dingtalk.com/markets/dingtalk/hrmqcode_pc?wh_ttid=phone";
        openLink(url);
      }
    });
    setTitle({
      title: ""
    });
  }

  shareBtn = () => {
    // console.log("分享");

    window._rlog(`_qrcode_share`);

    const currentLocation =
      location.protocol +
      "//" +
      location.host +
      location.pathname +
      location.search;
    const linkTo =
      (this.state.qrCodeInfo.qrCodeUrl || currentLocation) +
      "&_dt_no_comment=1#/steps";
    window.dd.biz.util.share({
      style: 0,
      url: linkTo,
      title: "邀请你完善入职登记表",
      content: "快来完善个人人事档案，完整的个人信息是和公司交流的第一步！",
      image: "https://gw.alicdn.com/tfs/TB13u27aOqAXuNjy1XdXXaYcVXa-88-88.png"
    });
  };

  /*
  * 生成二维码图片
  * */
  componentDidMount() {
    this.props.actions.fetchQrCodeInfo().then(res => {
      if (res.success) {
        this.setState({
          qrCodeInfo: res.result
        });
      }
    });
  }
  render() {
    const { qrCodeInfo } = this.state;
    const defaultLogo =
      "https://gw.alicdn.com/tfs/TB1DzppXBUSMeJjy1zkXXaWmpXa-160-160.png";
    let userId = "";
    if(window.__auth){
      userId = window.__auth.userId || "";
    }
    return (
      <div>
        <div className="qr-container scroll-body">
          
          <div className="qr-bg-top clearfix">
            <div className="table">
              <div className="fl table-cell">
                <h1 className="corp-name">{qrCodeInfo.orgName}</h1>
              </div>
              <div className="fr table-cell">
              {
                qrCodeInfo.orgLogo ? <img
                  src={
                    mid2Url(qrCodeInfo.orgLogo || "", { imageSize: "thumb" }) ||
                    defaultLogo
                  }
                /> : <span>{qrCodeInfo.orgName ? qrCodeInfo.orgName.substr(0, 1) : ""}</span>
              }
              
            </div>
            </div>
          </div>

          <div className="qr-bg clearfix">
            <div className="qr-bg-bd">
              <img
                src={`/hrmregister/mobile/noAuthentication/qrCodeForSave?corpId=${qrCodeInfo.corpId}&userId=${userId}`}
                className="qr-code"
                alt="二维码"
                id="qr"
                crossOrigin="Anonymous"
              />
                <div className="qr-save">长按识别二维码可保存图片</div>
              {/* <img
                src="https://gw.alicdn.com/tfs/TB1H3Ogk3MPMeJjy1XdXXasrXXa-230-230.png"
                className="qr-code"
                alt="二维码"
                id="qr"
                crossOrigin="Anonymous"
              /> */}
            </div>

            <div className="qr-ft" onClick={() => this.shareBtn()}>
              <span>分享给同事</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
